<template>
    <div :class="{ headerBox: true }" id="registerBox">
        <h3 :class="{ title: true }">注册</h3>
        <!-- 输入界面 -->
        <div :class="{ inputStyle: true }">
            账号:<el-input
                v-model="account"
                placeholder="请输入账号"
                @change="inspect"
            ></el-input>
        </div>
        <div :class="{ inputStyle: true }">
            密码:<el-input
                v-model="password"
                placeholder="请输入密码"
            ></el-input>
        </div>
        <div :class="{ inputStyle: true }">
            姓名:<el-input v-model="name" placeholder="请输入姓名"></el-input>
        </div>
        <div :class="{ inputStyle: true }">
            身份证号码:<el-input
                v-model="Idcard"
                placeholder="请输入身份证号码"
            ></el-input>
        </div>
        <div :class="{ inputStyle: true }">
            电话号码:<el-input
                v-model="phone"
                placeholder="请输入身份证号码"
            ></el-input>
        </div>
        <!-- 按钮 -->
        <div :class="{ buttonStyle: true }">
            <el-button round :disabled="isOk" @click="touch">注册</el-button>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions: registerMapActions } = createNamespacedHelpers("register"); //主仓库引入子仓库的名称,
export default {
    data() {
        return {
            account: "",
            password: "",
            name: "",
            Idcard: "",
            phone: "",
            isOk: false,
        };
    },
    methods: {
        ...registerMapActions(["isAccess", "register"]),
        async inspect() {
            //验证是否注册

            const data = await this.isAccess(this.account);
            console.log("验证账号是否存在", data);
            this.isOk = data.status;
        },
        async touch() {
            const data = await this.register({
                account: this.account,
                password: this.password,
                name: this.name,
                Idcard: this.Idcard,
                phone:this.phone,
            });
            if (data.status) {
                alert("注册成功");
                this.$router.push("/login");
            } else {
                alert("注册失败");
            }
        },
    },
    computed: {},
};
</script>
    
<style lang="scss">
body,
html {
    overflow: hidden;
}
#registerBox {
    margin-top: 150px;
}
/* 登录框布局 */
.headerBox {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    background-color: #eeeeee;
}
.headerBox * {
    margin: 5px;
}
/* 标题 */
.title {
    text-align: center;
}
/* 输入框样式 */
.inputStyle {
    width: 250px;
    margin: 0 auto;
}
/* 单选框设置 */
.radioSet {
    text-align: center;
}
/* 按钮样式 */
.buttonStyle {
    text-align: center;
}
</style>